<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>个人网站</title>
		<style>
			*{
				margin:0px;
				padding: 0px;
			}
			.bg{
				width: 800px;
				height: 200px;
				background-image: linear-gradient(to top right ,#8CA8B6,#fff);
				margin: auto;
			}
			.bg_1{
				width: 400px;
				height: 60px;
				border: black solid 1px;
				position: relative;
				top: 30px;
				margin: auto;
				text-align: center;
				line-height: 60px;				
			}
			.bg_2{
				width: 200px;
				height: 30px;
				background-color: white;
				position: relative;
				top: 50px;
				margin: auto;
				text-align: center;
				line-height: 30px;
			}
			.bott_001,.bott_002,.bott_003{
				float: left;
			}
			.clear{
				clear: both;
			}
			.bottom{
				margin: auto;
				width: 800px;
				
			}
			.contact,.en{
				width: 200px;
				height: 60px;
				background-color: #404040;
				color: white;
				letter-spacing: 10px;
			}
			.tel,.tel_01{
				float: left;
			}
			.email_01,.email{
				float: left;
			}
			.tel,.email{
				width: 40px;
				height: 40px;
			}
			.bott_001 div,.en{
				text-align: center;
				line-height: 60px;
			}
			.school{
				text-align: center;
				line-height: 25px;
				margin: auto;
				}
			.bott_002 img{
				border-radius: 50%;
				border: black 1px solid;
				width: 160px;
				height: 160px;
			}
			.bott_002,.bott_001,.bott_003{
				margin-left: 60px;
			}
			.work,.energy{
				width: 800px;
				height: 80px;
				background-color: #D8D8D8;
				text-align: center;
				line-height: 80px;
				font-size: larger;
			}
			.company{
				margin-left: 20px;
			}
			.company_01{
				margin-left: 40px;
			}
		</style> 
	</head>
	<body>
		<div class="top">
			<div class="bg">
				<div class="bg_1"><h2>个人简历</h2></div>
				<div class="bg_2">前端</div>
			</div>	
		</div>
		<div class="bottom">
			<div class="bottom_01">
				<div class="bott_001">
					<div class="contact">联系方式</div>
					<div>
						<img src="img/电 话.png"  class="tel"/>
						<span class="tel_01">&nbsp;13858818526</span>
						<div class="clear"></div>
					</div> 
					<div >
						<img src="img/邮箱.png" class="email" />
						<span class="email_01">&nbsp;498935706@qq.com</span>
						<div class="clear"></div>
					</div>
				</div>
				<div class="bott_002">
					<img src="img/OIP.jpg" />
				</div>
				<div class="bott_003">
					<div class="en">教育背景</div>
					<div>
						<span class="school">
						大学：广厦
						</span>
					</div>

				
				</div>
				<div class="clear"></div>
			</div>
		
			<div class="bottom_03">
				<div class="energy">技能及其他</div>
				<div>
					<script src="js/echarts.min.js"></script>
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: "category",
          data: ['Word', 'HTML', 'web'],
        },
        yAxis: {
          type: "",
        },
        series: [
          {
            data: [100, 50,50],
            type: "bar",
          },
        ],
      };

      option && myChart.setOption(option);
    </script>

					
				</div>
			</div>

			<div class="bottom_04">
				<div class="energy">地区</div>
				<div>
					<script src="js/echarts.min.js"></script>
					<script src="js/zhejiang.js"></script>
					<div id="main2" style="width: 600px; height: 450px"></div>
					<script>
					  var myChart = echarts.init(document.getElementById("main2"));
					  var option = {
						title: {
						  text: "",
						},
						series: [
						  {
							type: "map",
							map: "浙江",
							roam: true,
							zoom: 1,
							itemStyle: {
							  borderColor: "red",
							},
				
							data: [
							  {
								name: "温州市",
								itemStyle: {
								  areaColor: "red",
								  borderColor: "black",
								},
							  },
							],
						  },
						],
					  };
					  myChart.setOption(option);
					</script>
				<div class="bottom_05">
				<div class="energy">能力</div>
				<div>
					<div id="main05" style="width: 600px; height: 400px"></div>

				<script src="js/echarts.min.js"></script>
				<script type="text/javascript">
				  var myChart = echarts.init(document.getElementById("main05"));
				  var option = {
					title: {
					  text: "",
					},
					tooltip: {},
					legend: {
					  data: [""],
					},
					radar: {
					  // shape: 'circle',
					  name: {
						textStyle: {
						  color: "#fff",
						  backgroundColor: "#999",
						  borderRadius: 3,
						  padding: [3, 5],
						},
					  },
					  indicator: [
						{ name: "", max: 6500 },
						{ name: "", max: 16000 },
						{ name: "", max: 30000 },
						{ name: "", max: 38000 },
						{ name: "", max: 52000 },
						{ name: "", max: 25000 },
					  ],
					},
					series: [
					  {
						name: "",
						type: "radar",
						// areaStyle: {normal: {}},
						data: [
						  {
							value: [4300, 10000, 28000, 35000, 50000, 19000],
							name: "",
						  },
						  {
							value: [5000, 14000, 28000, 31000, 42000, 21000],
							name: "",
						  },
						],
					  },
					],
				  };
				  myChart.setOption(option);
				</script>
				</div>

			</div>
			
		</div>
		
	</body>
</html>
